<template>
    <div class="row" :style="rowStyle" :class="rowClass">
        <slot/>
    </div>
</template>

<script>
  export default{
    name: "Row",
    props: {
      gutter: {
        type: [String,Number]
      },
      align: {
        type: String,
        validator(value){
          return ["left","center","right"].includes(value)
        }
      }
    },
    mounted() {
      this.$children.forEach(vm=>{
        vm.gutter = parseInt(this.gutter)
      })
    },
    computed:{
      rowStyle(){
        let {gutter} = this
        return {marginLeft: -gutter/2+'px',marginRight: -gutter/2+'px'}
      },
      rowClass(){
        let {align} = this
        return [align && `align-${align}`]
      }
    }
  }
</script>

<style lang="scss" scoped>
    .row {
        display:flex;
        flex-wrap: wrap;
        &.align-left {
            justify-content: flex-start;
        }
        &.align-right {
            justify-content: flex-end;
        }
        &.align-center {
            justify-content: center;
        }
    }
</style>
